<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>M3U8 Downloader 功能测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f7fa;
        }
        .test-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .test-title {
            color: #409eff;
            margin-bottom: 15px;
        }
        .test-section {
            margin-bottom: 15px;
        }
        .test-button {
            background: #409eff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        .test-button:hover {
            background: #337ecc;
        }
        .test-result {
            background: #f0f9ff;
            border: 1px solid #b3d8ff;
            border-radius: 4px;
            padding: 10px;
            margin-top: 10px;
            font-family: monospace;
        }
        .status-success { color: #67c23a; }
        .status-error { color: #f56c6c; }
        .status-info { color: #909399; }
    </style>
</head>
<body>
    <h1>M3U8 Downloader 功能测试</h1>
    
    <div class="test-card">
        <h2 class="test-title">1. 任务存储测试</h2>
        <div class="test-section">
            <button class="test-button" onclick="testTaskStorage()">测试任务存储</button>
            <button class="test-button" onclick="clearTaskStorage()">清除任务存储</button>
        </div>
        <div id="storage-result" class="test-result" style="display: none;"></div>
    </div>

    <div class="test-card">
        <h2 class="test-title">2. 文件大小格式化测试</h2>
        <div class="test-section">
            <button class="test-button" onclick="testFileSizeFormat()">测试文件大小格式化</button>
        </div>
        <div id="filesize-result" class="test-result" style="display: none;"></div>
    </div>

    <div class="test-card">
        <h2 class="test-title">3. 进度计算测试</h2>
        <div class="test-section">
            <button class="test-button" onclick="testProgressCalculation()">测试进度计算</button>
        </div>
        <div id="progress-result" class="test-result" style="display: none;"></div>
    </div>

    <div class="test-card">
        <h2 class="test-title">4. 任务状态管理测试</h2>
        <div class="test-section">
            <button class="test-button" onclick="testTaskStatus()">测试任务状态</button>
        </div>
        <div id="status-result" class="test-result" style="display: none;"></div>
    </div>

    <div class="test-card">
        <h2 class="test-title">5. 格式转换测试</h2>
        <div class="test-section">
            <button class="test-button" onclick="testFormatConversion()">测试格式转换</button>
        </div>
        <div id="conversion-result" class="test-result" style="display: none;"></div>
    </div>

    <script>
        // 模拟任务存储
        const mockTasks = [
            {
                id: 'task_1',
                filename: '测试视频1',
                status: 'completed',
                progress: 100,
                downloadedSize: 1024 * 1024 * 50, // 50MB
                totalSize: 1024 * 1024 * 50,
                startTime: Date.now() - 3600000, // 1小时前
                outputFile: '/path/to/video1.mp4'
            },
            {
                id: 'task_2',
                filename: '测试视频2',
                status: 'downloading',
                progress: 45,
                downloadedSize: 1024 * 1024 * 25, // 25MB
                totalSize: 1024 * 1024 * 100, // 100MB
                startTime: Date.now() - 1800000, // 30分钟前
                downloadedSegments: 45,
                totalSegments: 100
            },
            {
                id: 'task_3',
                filename: '测试视频3',
                status: 'error',
                progress: 0,
                downloadedSize: 0,
                totalSize: 1024 * 1024 * 200, // 200MB
                startTime: Date.now() - 7200000, // 2小时前
                error: '网络连接失败'
            }
        ];

        // 1. 任务存储测试
        function testTaskStorage() {
            const resultDiv = document.getElementById('storage-result');
            resultDiv.style.display = 'block';
            
            try {
                // 保存任务到localStorage
                localStorage.setItem('m3u8-downloader-tasks', JSON.stringify(mockTasks));
                
                // 读取任务
                const stored = localStorage.getItem('m3u8-downloader-tasks');
                const parsedTasks = JSON.parse(stored);
                
                resultDiv.innerHTML = `
                    <div class="status-success">✅ 任务存储测试成功</div>
                    <div>存储的任务数量: ${parsedTasks.length}</div>
                    <div>任务状态分布:</div>
                    <ul>
                        <li>已完成: ${parsedTasks.filter(t => t.status === 'completed').length}</li>
                        <li>下载中: ${parsedTasks.filter(t => t.status === 'downloading').length}</li>
                        <li>失败: ${parsedTasks.filter(t => t.status === 'error').length}</li>
                    </ul>
                `;
            } catch (error) {
                resultDiv.innerHTML = `<div class="status-error">❌ 任务存储测试失败: ${error.message}</div>`;
            }
        }

        // 清除任务存储
        function clearTaskStorage() {
            localStorage.removeItem('m3u8-downloader-tasks');
            const resultDiv = document.getElementById('storage-result');
            resultDiv.style.display = 'block';
            resultDiv.innerHTML = '<div class="status-info">🗑️ 任务存储已清除</div>';
        }

        // 2. 文件大小格式化测试
        function testFileSizeFormat() {
            const resultDiv = document.getElementById('filesize-result');
            resultDiv.style.display = 'block';
            
            const testSizes = [0, 1024, 1024*1024, 1024*1024*1024, 1024*1024*1024*1024];
            const results = testSizes.map(size => {
                const formatted = formatFileSize(size);
                return `${size} bytes = ${formatted}`;
            });
            
            resultDiv.innerHTML = `
                <div class="status-success">✅ 文件大小格式化测试</div>
                <div>测试结果:</div>
                <ul>
                    ${results.map(r => `<li>${r}</li>`).join('')}
                </ul>
            `;
        }

        // 文件大小格式化函数
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 B';
            const k = 1024;
            const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        // 3. 进度计算测试
        function testProgressCalculation() {
            const resultDiv = document.getElementById('progress-result');
            resultDiv.style.display = 'block';
            
            const testCases = [
                { downloaded: 0, total: 100, expected: 0 },
                { downloaded: 50, total: 100, expected: 50 },
                { downloaded: 100, total: 100, expected: 100 },
                { downloaded: 75, total: 200, expected: 38 },
                { downloaded: 0, total: 0, expected: 0 }
            ];
            
            const results = testCases.map(testCase => {
                const calculated = calculateProgress(testCase.downloaded, testCase.total);
                const status = calculated === testCase.expected ? '✅' : '❌';
                return `${status} ${testCase.downloaded}/${testCase.total} = ${calculated}% (期望: ${testCase.expected}%)`;
            });
            
            resultDiv.innerHTML = `
                <div class="status-success">✅ 进度计算测试</div>
                <div>测试结果:</div>
                <ul>
                    ${results.map(r => `<li>${r}</li>`).join('')}
                </ul>
            `;
        }

        // 进度计算函数
        function calculateProgress(downloadedSize, totalSize) {
            if (totalSize === 0) return 0;
            return Math.round((downloadedSize / totalSize) * 100);
        }

        // 4. 任务状态管理测试
        function testTaskStatus() {
            const resultDiv = document.getElementById('status-result');
            resultDiv.style.display = 'block';
            
            const statusMap = {
                'parsing': '解析中',
                'downloading': '下载中',
                'merging': '合并中',
                'completed': '已完成',
                'error': '失败',
                'paused': '已暂停'
            };
            
            const statusTypes = {
                'parsing': 'info',
                'downloading': 'primary',
                'merging': 'warning',
                'completed': 'success',
                'error': 'danger',
                'paused': 'info'
            };
            
            const results = Object.keys(statusMap).map(status => {
                const text = statusMap[status];
                const type = statusTypes[status];
                return `${status} → ${text} (${type})`;
            });
            
            resultDiv.innerHTML = `
                <div class="status-success">✅ 任务状态管理测试</div>
                <div>状态映射:</div>
                <ul>
                    ${results.map(r => `<li>${r}</li>`).join('')}
                </ul>
            `;
        }

        // 5. 格式转换测试
        function testFormatConversion() {
            const resultDiv = document.getElementById('conversion-result');
            resultDiv.style.display = 'block';
            
            const supportedFormats = ['mp4', 'avi', 'mkv', 'webm', 'mov'];
            const qualityOptions = [
                { value: '18', label: '高质量' },
                { value: '23', label: '中等质量' },
                { value: '28', label: '低质量' }
            ];
            
            resultDiv.innerHTML = `
                <div class="status-success">✅ 格式转换测试</div>
                <div>支持的格式:</div>
                <ul>
                    ${supportedFormats.map(f => `<li>${f.toUpperCase()}</li>`).join('')}
                </ul>
                <div>质量选项:</div>
                <ul>
                    ${qualityOptions.map(q => `<li>${q.label} (CRF ${q.value})</li>`).join('')}
                </ul>
            `;
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('M3U8 Downloader 功能测试页面已加载');
            console.log('可用测试功能:');
            console.log('1. 任务存储测试');
            console.log('2. 文件大小格式化测试');
            console.log('3. 进度计算测试');
            console.log('4. 任务状态管理测试');
            console.log('5. 格式转换测试');
        });
    </script>
</body>
</html> 